<template>
    <div class="wrapper">
        <div class="header college">{{ college }}</div>
        <div class="collegeInfo">
            <div v-if="college === '云南农业大学'">{{ baseConfig.year }}年学校共招收本专科生<span>{{ dataCollege.collegeSex.collegeNum }}</span>人</div>
            <div v-else >{{ baseConfig.year }}年学院共招收本专科生<span>{{ dataCollege.collegeSex.collegeNum }}</span>人</div>
            <div class="ratio">
              <div style="display:flex; flex-direction: column;">
                <div>其中包括男生<span>{{ dataCollege.collegeSex.sexNumM }}</span>人</div>
                <div>女生<span>{{ dataCollege.collegeSex.sexNumF }}</span>人，男女生比例</div>
                <div></div>
              </div>
              <a-progress
                style="margin-left: 30px;"
                type="circle"
                :width="85"
                :strokeWidth="15"
                :successPercent="successPercent"
                strokeLinecap="square"
                :format="ratioFormat"
              />
            </div>
            <div>下设了<span>{{ dataCollege.major.count }}</span>个专业(包括专升本)</div>
            <div
              class="more"
              v-if="baseConfig.reportLink"
              @click="goToReportLink(baseConfig.reportLink)"
            >
                更多内容请了解
                <span>{{ baseConfig.year }}年新生大数据 </span>
              </div>
        </div>
        <!-- 分隔符 -->
        <div class="header condition">报到情况<span @click="$router.push('/detail')">查看详情 ></span></div>
        <div class="conditionInfo">
            <div>当前已经报到<span>{{ report.reportNum }}</span>人，未报到<span>{{ report.collegeNum - report.reportNum }}</span>人</div>
            <div>报到率已达<span>{{ ((report.reportNum / report.collegeNum) * 100).toFixed(2) + '%' }}</span></div>
            <div class="progress con">
              <a-progress
                :strokeWidth="20"
                :percent="(report.reportNum / report.collegeNum) * 100"
                :showInfo="false"
                :stroke-color="{
                  '0%': '#F1AA2D',
                  '100%': '#FF7C69',
                }"
                status="active"
              />
            </div>
            <div v-if="!toastIsdao">提醒：同学你还没在易班报到哟~</div>
            <div class="bigScreen" @click="goToDist">全校报到情况概况 <span>></span> </div>
        </div>
        <!-- 分隔符 -->
        <div class="header remarks">新生寄语</div>
        <div class="wishes" v-html="homeConfig.richText" />
         <!-- 分隔符 -->
         <div class="header more-content">更多精彩</div>
        <more-content :linkList="homeConfig.linkList" />
         <!-- 分隔符 -->
        <hr style="margin: 20px 0 10px 0;">
        <div class="remind">
            <span>本应用数据来源招就处/学生处</span>
            <span>包括所有本专科新生，如有错误请以实际为准</span>
            <span>云南农业大学易班学生工作站 制</span>
        </div>
        <div class="LOGO"></div>
    </div>
</template>

<script>

import api from '../api/index.js'
import MoreContent from './moreContent.vue'

export default {
  components: {
    MoreContent
  },
  data () {
    return {
      dataCollege: {
        collegeSex: {},
        major: {}
      },
      report: {},
      toastIsdao: false
    }
  },
  async mounted () {
    if (this.college) {
      this.fetchData()
      this.fetchReport()
      this.polling()
    }
    const res = await api.report.findByStuNo({ stuNo: this.$store.state.userInfo.yb_studentid })
    if (res.code === 0) {
      this.toastIsdao = res.data.isdao
    } else {
      this.toastIsdao = true
    }
  },
  computed: {
    college: function () {
      return this.$store.state.userInfo.yb_collegename
    },
    successPercent: function () {
      const { collegeNum, sexNumM } = this.dataCollege.collegeSex
      return (sexNumM / collegeNum) * 100
    },
    baseConfig () {
      return this.$store.state.baseConfig
    },
    homeConfig () {
      const config = this.$store.state.homeConfig
      if (config.richText) {
        config.richText = config.richText.replace(/[\n]/g,'</br>').replace(/\s/g,'&nbsp;')
      }
      return this.$store.state.homeConfig
    }
  },
  methods: {
    ratioFormat () {
      return this.dataCollege.collegeSex.sexProportion
    },
    async fetchData () {
      const res = await api.report.dataCollege({ college: this.college })
      if (res.code === 0) {
        this.dataCollege = res.data
      }
    },
    async fetchReport () {
      const res = await api.report.reportCollege({ college: this.college })
      if (res.code === 0) {
        this.report = res.data
      }
    },
    polling () {
      clearInterval(window.timer)
      window.timer = setTimeout(async () => {
        await this.fetchReport()
        console.log('数据更新成功')
        this.polling()
      }, 30000)
    },
    goToReportLink (link) {
      location.href = link
    },
    goToDist () {
      location.href = 'http://49.235.166.90:9527/dist/#/rou1'
    }
  }
}
</script>

<style scoped>
  .wrapper{
    margin-top: 18%;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: 17%;
    box-sizing: border-box;
    max-width: 480px;
}

.wrapper .header{
    position: relative;
    font-size: 1.7em;
    font-weight: 700;
    color: #fff;
    margin-top: 40px;
}

.wrapper .header::before{
    content: "";
    position: absolute;
    top: -14px;
    width: 0px;
    height: 0px;
    border: 10px solid transparent;
    border-top:  10px solid orange;
}

.wrapper .header.condition {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .header.condition span {
  font-size: 16px;
  font-weight: normal;
}

.wrapper .college::after{
    content: "COLLEGE";
    position: absolute;
    top: -18px;
    left: 24px;
    font-size: 14px;
    font-weight: normal;
    color: rgb(0, 79, 182);
}

.wrapper .condition::after{
    content: "CONDITION";
    position: absolute;
    top: -18px;
    left: 24px;
    font-size: 14px;
    font-weight: normal;
    color: rgb(0, 79, 182);
}

.wrapper .remarks::after {
  content: "WISHES";
  position: absolute;
  top: -18px;
  left: 24px;
  font-size: 14px;
  font-weight: normal;
  color: rgb(0, 79, 182);
}

.wrapper .more-content::after {
  content: "WONDERFUL";
  position: absolute;
  top: -18px;
  left: 24px;
  font-size: 14px;
  font-weight: normal;
  color: rgb(0, 79, 182);
}

.wishes {
  font-size: 14px;
  line-height: 28px;
  color: #000;
  background: white;
  padding: 10px;
  margin: 15px 0;
  border-radius: 8px;
  height: auto;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
}

.collegeInfo>div,
.conditionInfo>div{
    color: rgb(23, 0, 61);
    margin: 10px 0;
    font-size: 16px;
}

@media screen and (max-width: 320px) {
  .collegeInfo>div,
.conditionInfo>div{
    font-size: 14px;
}

.wrapper .header{ 
  font-size: 1.5em;
}
}

.collegeInfo>div>span,
.conditionInfo>div>span,
.collegeInfo>.ratio span {
    margin: 0 3px;
    font-size: 1.5em;
    font-weight: 700;
}

.collegeInfo .ratio {
  display: flex;
  align-items: center;
}

  .collegeInfo .progress .lf {
    margin-left : 80px;
  }

  .con .layui-progress-big, .con .layui-progress-big .layui-progress-bar{
    height: 24px;
    line-height: 24px;
    font-weight: 700;
  }

  .con .layui-progress-text {
    text-shadow: 1px 1px 2px #0002;
    font-size: 18px;
    line-height: 24px;
  }

  .col div:nth-of-type(1){
    position: relative;
  }

  .col div:nth-of-type(1)::before{
    content: "占比(男生)";
    position: absolute;
    top: 0px;
    left: 80px;
    color:  rgb(23, 0, 61);
  }

  .col .layui-progress{
     background-color: rgb(248, 255, 222);
  }

  .remind {
     text-align: center;
     font-size: 12px;
     display: flex;
     flex-direction: column;
  }

  .LOGO {
     margin: 0 auto;
     background-image: url(../assets/images/LOGO.png);
     background-repeat: no-repeat;
     width: 40%;
     height: 30%;
     background-size: 100%;
     padding-bottom: 80px;
  }

  div.more {
    margin-top: 20px;
  }

 div.more span{
    font-size: 16px;
    font-weight: 500;
    background-color: rgba(228, 228, 228, 0.4);
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 10px;
 }

  @media all and (min-width: 1024px) {
    .wrapper {
      margin-top: 10%;
    }
    .wrapper .header{ 
      font-size: 1.5em;
    }
  }
</style>
